<template>
  <div>
    <Header :title="title" :backgroundColor="'skyblue'"></Header>
    <div id="Mygoods">
      <Goods v-for="obj in list" :key="obj.id" :list="obj"></Goods>
    </div>
    <Footer :arr="list"></Footer>
  </div>
</template>

<script>
import Header from "./components/Header";
import Footer from "./components/Footer";
import Goods from "./components/Goods";

export default {
  data() {
    return {
      list: [],
      title: "购物车案例",
    };
  },
  components: {
    Header,
    Footer,
    Goods,
  },
  created() {
    this.$axios({
      url: "https://www.escook.cn/api/cart",
    }).then((obj) => {
      console.log(obj);
      this.list = obj.data.list;
    });
    // 需要把请求出来的数据渲染到页面(Goods页面显示 得循环吧 循环谁呢  循环请求来的data.list 怎么传给Goods组件用呢?  定义一个vue变量  然后把请求到的list赋给定义的变量 然后才能循环)
    // 循环完了 就把obj传给Goods使用  父传子 子用props接收父动态的obj
  },
};
</script>

<style>
/* 顶部会遮挡所以给goods个padding */
#Mygoods {
  padding: 45px 0 50px 0;
}
</style>